<template>
    <div class="page" ref="topDiv">
        <div class="page_two">
            <p class="page_two_left">{{videoInfo.worksTitle}}</p>
            <div class="page_two_right">
                <Breadcrumb separator="|">
                    <Breadcrumb-item class="page_two_right_left_child">{{videoInfo.worksTypeName}}</Breadcrumb-item>
                    <Breadcrumb-item class="page_two_right_left_child">{{videoInfo.browse}}次播放</Breadcrumb-item>
                    <Breadcrumb-item class="page_two_right_left_child">发布时间：{{videoInfo.createDate}}</Breadcrumb-item>
                </Breadcrumb>
                <div class="page_two_right_child" @click="clickThumb()"
                     v-bind:class="{thumbStatus:videoInfo.thumbsStatus==1}">
                    <Icon class="page_two_right_child_icon" type="ios-thumbs-up-outline"
                          v-bind:class="{thumbContentStatus:videoInfo.thumbsStatus==1}"/>
                    <label class="page_two_right_child_label"
                           v-bind:class="{thumbContentStatus:videoInfo.thumbsStatus==1}">{{videoInfo.thumbs}}</label>
                </div>
            </div>
        </div>
        <div style="height: 300px">
<!--            <iframe class="artical_img" v-if='downloadUrl' :src="downloadUrl" >-->
<!--            -->
<!--            </iframe>-->
          <video class="artical_img" :src="downloadUrl" controls="controls">
            您的浏览器不支持 video 标签。
          </video>

        </div>
        <div v-show="this.$route.query.type=='0'" style="margin-top: 250px">
            <div class="page_three">
                <p class="page_three_line"></p>
                <label class="page_three_label">相关视频</label>
            </div>
            <div class="page_four">
                <div class="page_four_single" v-for="item in relateInfos">
                    <img class="page_four_img" :src="item.cover"/>
                    <p class="page_four_text">{{item.worksTitle}}</p>
                </div>
            </div>
            <div class="down_info">
                <p class="down_red_line_4">一</p>
                <p class="down_red_line_1">一</p>
            </div>
        </div>
    </div>
</template>

<script>

import {Api} from '../../../api/index.js'
import {sessionStorage} from '../../../common/cacheUtils.js';

export default {
        data() {
            return {
                downloadUrl: "",
                videoInfo: {},
                relateInfos: [],
                playerOptions: {
                    width: 800,
                    height: 500,
                    sources: [{
                        type: 'rtmp/mov',
                        src: ' rtmp://172.17.10.104/vod/test.mov'
                    }],
                    techOrder: ['flash'],
                    autoplay: true,
                    muted: true
                }
            }
        },
        mounted() {
            this.$refs.topDiv.style.height = (window.innerHeight - 120) + 'px';
            if (this.$route.query.type == '1') {//培训视频
                this.queryWorks()
            } else {//文化作品
                this.$http.get(Api.interestedPartiesUserFile + "/" + this.$route.query.id + "/files/video").then((res) => {
                    console.log(res.data)
                    if (res.data.result == "success" && res.data.data.length > 0) {
                        // this.downloadUrl = Api.downloadMongoFile + "/" + res.data.data[0].id;
                        this.downloadUrl = Api.downloadMongoFile + "/" +res.data.data[0].id
                    }
                }).catch(e => {
                    this.$Message.error("文件读取失败");
                });
                this.$http.get(Api.queryWorkById + "/" + this.$route.query.id).then(res => {
                    this.videoInfo = res.data.data[0];
                    this.videoInfo.createDate = this.formatDate(new Date(this.videoInfo.createDate), 'yyyy-MM-dd');
                    if (this.videoInfo.worksType == '0')
                        this.videoInfo.worksTypeName = "图片"
                    else if (this.videoInfo.worksType == '1')
                        this.videoInfo.worksTypeName = "视频"
                    if (this.videoInfo.worksType == '2')
                        this.videoInfo.worksTypeName = "图文"
                    //this.$http.get(Api.queryWorks+"?activityId="+this.videoInfo.activityId+"&startPage=1&size=4&worksType=1&activityThemeId="+this.videoInfo.activityId).then(res1 => {
                    this.$http.get(Api.queryWorks + "?activityId=" + this.videoInfo.activityId + "&startPage=1&size=4").then(res1 => {
                        this.relateInfos = res1.data.data.data;
                        this.relateInfos.forEach(item => {
                            this.$http.get(Api.getMongoFileInfo + "/" + item.activitysCover).then((res2) => {
                                this.$set(item, "cover", res2.data.picture)
                            }).catch(e => {
                            });
                        });
                    }).catch(e => {
                    });
                }).catch(e => {
                    this.$Message.error("数据获取失败")
                });
            }
        },
        methods: {
            clickThumb() {
                let url=''
                if (this.$route.query.type == '1') {//培训视频
                    url=Api.courseThumbs
                } else {//文化作品
                    url=Api.clickThumb
                }
                let userId = sessionStorage('userId').getObject('userId').userId;
                this.$http.get(url + "?worksId=" + this.videoInfo.id + "&userId=" + userId).then(res => {
                    if (res.data.status == 200) {
                        this.videoInfo.thumbsStatus = res.data.data;
                        if (this.videoInfo.thumbsStatus == '1') {
                            this.videoInfo.thumbs++;
                        } else {
                            this.videoInfo.thumbs--;
                        }
                    }
                })
            },

            queryWorks() {
                let data = {
                    startPage: 1, size: 1,
                    conditions: {
                        orgId: sessionStorage('userId').getObject('userId').companyId,
                        id: this.$route.query.id
                    }
                };
                this.$http.post(Api.queryCourseManagement, data).then(res => {
                    this.videoInfo = res.data.data.data[0]
                    this.videoInfo.createDate = this.formatDate(new Date(this.videoInfo.createDate), 'yyyy-MM-dd');
                    this.videoInfo.worksTypeName = "视频";
                    this.$set(this.videoInfo, 'browse',this.videoInfo.viewNumber);
                    this.$set(this.videoInfo, 'thumbs',this.videoInfo.likes)
                    this.$delete(this.videoInfo,'viewNumber');
                    this.$delete(this.videoInfo,'likes');
                    this.videoInfo.worksTitle = this.videoInfo.courseName
                    this.downloadUrl = Api.courseVideoDownLoadUrl + this.videoInfo.courseAttachment//视频路径
                }).catch(e => {
                    this.$Message.error('请求失败');
                })
            },
            formatDate(date, fmt) {
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
                }
                let o = {
                    'M+': date.getMonth() + 1,
                    'd+': date.getDate(),
                    'h+': date.getHours(),
                    'm+': date.getMinutes(),
                    's+': date.getSeconds()
                };
                for (let k in o) {
                    if (new RegExp(`(${k})`).test(fmt)) {
                        let str = o[k] + '';
                        fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
                    }
                }
                return fmt;
            },
            padLeftZero(str) {
                return ('00' + str).substr(str.length);
            },
        }
    }

</script>


<style scoped>

    .page {
        background-color: white;
        min-width: 1250px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .video-player-box {
        width: 1200px;
        height: 100%;
        background: #BEBEBE;
    }

    .page_two {
        width: 1200px;
        height: 80px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .page_two_left {
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
        height: 75px;
        line-height: 75px;
    }

    .page_two_right {
        display: flex;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #757575;
    }

    .page_two_right_left_child {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #757575;
    }

    .page_two_right >>> .ivu-breadcrumb > span:last-child {
        font-weight: 400;
        color: #757575;
    }

    .page_two_right_child {
        margin-left: 10px;
        width: 67px;
        height: 24px;
        border: 1px solid #F44336;
        border-radius: 18px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .page_two_right_child_icon {
        color: #D80200;
    }

    .page_two_right_child_label {
        margin-left: 10px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #D80200;
    }

    .page_three {
        display: flex;
        align-items: center;
        margin-bottom: 23px;
    }

    .page_three_line {
        width: 5px;
        height: 20px;
        background: #D80200;
        border-radius: 3px;
    }

    .page_three_label {
        width: 1185px;
        margin-left: 10px;

        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
    }

    .page_four {
        width: 1200px;
        display: flex;
        justify-content: space-between;
    }

    .page_four_single {
        height: 178px;
        width: 224px;
        display: flex;
        flex-direction: column;
    }

    .page_four_img {
        width: 224px;
        height: 140px;
        background: #BDBDBE;
        border-radius: 4px;
    }

    .page_four_text {
        width: 220px;
        font-size: 14px;
        line-height: 38px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    .artical_img{
        /*margin-top:400px;*/
        width:600px;
        height:400px;
    }
    .down_info {
        display: flex;
        flex-direction: column;
        height: 200px;
    }

    .down_red_line_4 {
        margin-top: 48px;
        width: 1200px;
        height: 4px;
        color: white;
        background-color: red;
    }

    .down_red_line_1 {
        margin-top: 3px;
        width: 1200px;
        height: 1px;
        color: white;
        background-color: red;
    }

    .down_company_info {
        margin: 24px;
        width: 1200px;
        height: 24px;
        text-align: center;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #ADADAD;
        line-height: 24px;
    }

    .thumbStatus {
        background-color: red;
    }

    .thumbContentStatus {
        color: #fff;
    }
</style>
